<template>
  <div class="talk">
    <div class="title">{{ data }}</div>
    <button @click="getATalk">获取一句土味情话</button>
    <ul>
      <li v-for="talk in talkList">{{talk}}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="LoveTalk">
  import { ref, defineEmits, defineProps } from 'vue'
  import { storeToRefs } from "pinia";

  const props = defineProps({
    getTalkCallback: Function ,
    data: String
  })  

  const {getTalkCallback} = props

  const talkList = ref<string[]>([])
  const getATalk = () => {
    talkList.value.push("宝，我去输液了。输得什么液？想你的液~")
    getTalkCallback && getTalkCallback(talkList.value[talkList.value.length-1])
  }




  /**暴露给弹窗的保存方法：需要保存的数据 */
  async function getCallbackData() {
    return talkList;
  }

  // 暴露方法给外部访问
  defineExpose({
    getCallbackData
  })

</script>

<style scoped>
  .title {
    margin: 8px;
    color: #fff;
  }
  .talk {
    background-color: rgb(63, 179, 98);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
</style>